<template>
  <div>
    <div class="select">
      <!-- <OrgSelect
        key="searchOrgSelect"
        v-model="search.organization"
        :url="getReportOrgs"
        labelKey="organizationName"
        valueKey="organizationId"
        searchKey="name"
        placeholder="请选择机构"
        :clearable="true"
        :multiple="true"
        style="width: 200px"
        class="m-r-5"
        @getValue="getValue"
        @getSnArray="getSnArray"
        @clear="search.organization = null"
      /> -->
      <!-- multiple -->
      <selectTree class="m-r-10" v-model="value" filterable :data="list" :url="getReportOrgs"/>
      <el-date-picker
        v-model="search.startYearMonth"
        type="month"
        style="width: 200px"
        size="mini"
        class="m-r-10"
        value-format="yyyy-MM"
        :pickerOptions="startOptions"
        placeholder="开始月"
      >
      </el-date-picker>
      <span class="m-r-10">-</span>
      <el-date-picker
        v-model="search.endYearMonth"
        type="month"
        style="width: 200px"
        size="mini"
        class="m-r-10"
        value-format="yyyy-MM"
        :pickerOptions="endOptions"
        placeholder="结束月"
      >
      </el-date-picker>
      <el-button type="primary" size="mini" @click="init()">搜索</el-button>
      <el-button type="info" size="mini" @click="resetSearch()">重置</el-button>
      <el-button type="success" size="mini" @click="exportExcel"
        >导出excel</el-button
      >
    </div>
    <div class="box">
      <div class="tableFrameTitle">
        <div class="content">
          <div class="left">
            <li
              class="center row border-top border-right border-left"
              style="background: #d6dce4; height: 31px; width: 100%"
            ></li>
          </div>
          <div class="right">
            <li
              class="center row border-top border-bottom border-right title"
              style="width: 15%"
            >
              指标
            </li>
            <li
              class="center row border-top border-bottom border-right title"
              style="width: 15%"
            >
              值/人/千元
            </li>
            <li
              class="center row border-top border-bottom border-right title"
              style="width: 6%"
            >
              排位
            </li>
            <li
              class="center row border-top border-bottom border-right title"
              style="width: 7%"
            >
              同比
            </li>
            <li
              class="center row border-top border-bottom border-right title"
              style="width: 15%"
            >
              指标
            </li>
            <li
              class="center row border-top border-bottom border-right title"
              style="width: 15%;"
            >
              值/人/千元
            </li>
            <li
              class="center row border-top border-bottom border-right title"
              style="width: 6%"
            >
              排位
            </li>
            <li
              class="center row border-top border-bottom border-right title"
              style="width: 7%"
            >
              同比
            </li>
          </div>
        </div>
      </div>
      <div class="tableCase">
        <vue-scroll :ops="ops">
          <div class="father" v-for="(item, index) in items" :key="index">
            <div class="content">
              <div class="left">
                <ul>
                  <li
                    class="center row border-bottom border-right border-left"
                    :style="{
                      height:
                        (item.items.length / 2) * 30 +
                        item.items.length / 2 -
                        1 +
                        'px',
                      background: item.color,
                      width: '100%',
                      'font-weight': 'bold',
                    }"
                  >
                    <div> {{ item.name }} </div>
                    <div v-if="item.number">{{ item.number }}</div>
                  </li>
                </ul>
              </div>
              <div class="right">
                <ul v-for="(child, index) in item.items" :key="index">
                  <li
                    class="row border-bottom border-right text-left"
                    :style="{
                      background: item.color,
                      'font-weight': 'bold',
                      'font-size': '12px',
                      width: '15%',
                      'line-height': '30px',
                    }"
                  >
                    &nbsp;&nbsp;{{ child.name }}
                    <el-tooltip
                        effect="dark"
                        placement="top-start"
                      >
                        <div slot="content" style="max-width: 50vw">
                          <div
                            class="flex-wrap is-align-start"
                          >
                            <div style="color: red">备注：</div>
                            <div class="flex-1">{{child.tips}}</div>
                          </div>
                        </div>
                        <i
                          class="el-icon-info d-i-b m-l-5"
                          style="font-size: 10px"
                        ></i>
                    </el-tooltip>
                  </li>
                  <li
                    class="center_2 row border-bottom border-right text-left"
                    :style="{ background: item.color, width: '15%' }"
                  >
                  {{ child.value }}
                  <el-tooltip
                        v-if="child.tips_value && child.value!==''"
                        effect="dark"
                        placement="top-start"
                      >
                        <div slot="content" style="max-width: 50vw">
                          <div
                            class="flex-wrap is-align-start"
                          >
                            <div style="color: red">备注：</div>
                            <div class="flex-1">{{child.tips_value}}</div>
                          </div>
                        </div>
                        <i
                          class="el-icon-info d-i-b m-l-5"
                          style="font-size: 10px"
                        ></i>
                    </el-tooltip>
                  </li>
                  <li
                    class="center row border-bottom border-right"
                    :style="{ background: item.color, width: '6%' }"
                  >
                     <!--{{ child.sn }}-->
                    <span class="handleLine" @click="handleRanking(child)">{{ child.sn }}</span>
                  </li>
                  <li
                    class="center row border-bottom border-right"
                    :style="{ background: item.color, width: '7%' }"
                  >
                    {{ child.past }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </vue-scroll>
      </div>
    </div>
    <Ranking ref="ranking" />
  </div>
</template>

<script>
import { getReportOrgs } from '@/api/fetch'
import { getGeneralSupervision } from '@/api/search'
import { downloadExcel } from '@/utils/utils'
import { formItems } from './formItems'
export default {
  components: {
    selectTree: () => import('../../../components/select/TreeSelect.vue'),
    Ranking: () => import('./components/Ranking.vue')
  },
  data () {
    return {
      items: formItems,
      search: {
        organization: null,
        startYearMonth: null,
        endYearMonth: null,
        org: null
      },
      list: [{
        label: '区人民医院医共体',
        id: 111,
        children: [
          { label: '新都区人民医院', id: 222 },
          { label: '城西社区卫生服务中心', id: 333 },
          { label: '大丰社区卫生服务中心', id: 444 },
          { label: '石板滩卫生院', id: 555 },
          { label: '木兰卫生院', id: 6666 }
        ]
      },
      {
        label: '区中医医院医共体',
        id: 777,
        children: [
          { label: '新都区中医医院', id: 888 },
          { label: '城东社区卫生服务中心', id: 999 },
          { label: '蜀都社区卫生服务中心', id: 101010 },
          { label: '三河街道卫生院', id: 111111 },
          { label: '新都街道龙虎卫生院', id: 121212 },
          { label: '马家卫生院', id: 131313 }
        ]
      },
      {
        label: '第二人民医院医共体',
        id: 141414,
        children: [
          { label: '新繁街道社区卫生服务中心', id: 151515 },
          { label: '新繁街道龙桥卫生院', id: 161616 },
          { label: '斑竹园卫生院', id: 171717 },
          { label: '清流卫生院', id: 181818 }
        ]
      }
      ],
      value: '',
      endOptions: {
        disabledDate: (time) => {
          if (this.search.startYearMonth) {
            return (
              new Date(this.search.startYearMonth).getTime() > time.getTime() ||
              time.getTime() > Date.now()
            )
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      startOptions: {
        disabledDate: (time) => {
          if (this.search.endYearMonth) {
            return (
              time.getTime() >= new Date(this.search.endYearMonth).getTime()
            )
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条
          background: '#A9A9A9', // 滚动条颜色
          opacity: 10, // 滚动条透明度
          'overflow-x': 'hidden'
        },
        videoData: []
      },
      SnArray: []
    }
  },
  watch: {
    value: {
      handler: function (val) {
        console.log(val)
      },
      immediate: true
    }
  },
  mounted () {
    /* 将prop格式转换 */
    this.items.forEach((child) => {
      child.items.forEach((item) => {
        const propAfter = item.prop.replace(/_([a-z]{1})/g, (match) => {
          return match.replace(/_/, '').toUpperCase()
        })
        item.prop = propAfter
      })
    })
  },
  methods: {
    init () {
      if (this.search.startYearMonth && this.search.endYearMonth) {
        this.clearData()
        let query = {}
        if (this.search.org) {
          query = {
            endYearMonth: this.search.endYearMonth,
            insCode: this.search.org.toString(),
            startYearMonth: this.search.startYearMonth
          }
        } else {
          query = {
            endYearMonth: this.search.endYearMonth,
            startYearMonth: this.search.startYearMonth
          }
        }
        getGeneralSupervision(query).then((res) => {
          if (Object.keys(res).length !== 0) {
            var obj = res
            this.items.forEach((child) => {
              child.items.forEach((item) => {
                item.value = obj[item.prop]
                this.$set(item, 'value', obj[item.prop])
                if (
                  Object.prototype.hasOwnProperty.call(obj, `${item.prop}Sn`)
                ) {
                  this.$set(item, 'sn', obj[`${item.prop}Sn`].value)
                  this.$set(item, 'snList', obj[`${item.prop}Sn`].list)
                }
                if (
                  Object.prototype.hasOwnProperty.call(obj, `${item.prop}Past`)
                ) {
                  this.$set(item, 'past', obj[`${item.prop}Past`])
                }
              })
            })
            this.$message.success('查询成功')
          } else {
            this.$message.warning('查询结果为空')
          }
        })
      } else {
        this.$message.error('请选择开始日期和结束日期！')
      }
    },
    getValue (val) {
      this.search.org = val
    },
    resetSearch () {
      this.search = {
        organization: null,
        daterange: []
      }
    },
    clearData () {
      this.items.forEach((child) => {
        child.items.forEach((item) => {
          item.value = ''
          item.sn = ''
          item.past = ''
        })
      })
    },
    getReportOrgs () {
      return getReportOrgs
    },
    handleRanking (child) {
      this.$refs.ranking.init({ child: child, search: this.search, snArray: this.SnArray })
    },
    exportExcel () {
      if (this.search.startYearMonth && this.search.endYearMonth) {
        let query = {}
        if (this.search.org) {
          if (this.search.org.length !== 0) {
            query = {
              endYearMonth: this.search.endYearMonth,
              insCode: this.search.org.toString(),
              startYearMonth: this.search.startYearMonth,
              reportFileName: '运营指标监测-总监管',
              exportType: 'xlsx',
              key: 'zongJianGuan'
            }
          } else {
            query = {
              endYearMonth: this.search.endYearMonth,
              startYearMonth: this.search.startYearMonth,
              reportFileName: '运营指标监测-总监管',
              exportType: 'xlsx',
              key: 'zongJianGuan'
            }
          }
        } else {
          query = {
            endYearMonth: this.search.endYearMonth,
            startYearMonth: this.search.startYearMonth,
            reportFileName: '运营指标监测-总监管',
            exportType: 'xlsx',
            key: 'zongJianGuan'
          }
        }
        downloadExcel(query)
      } else {
        this.$message.error('请选择日期后再导出！')
      }
    },
    getSnArray (SnArray) {
      this.SnArray = SnArray
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  .tableFrameTitle {
    width: 100%;
    height: 30px;
    .content {
      width: 100%;
      .left {
        width: 10%;
      }
      .right {
        width: 90%;
      }
    }
  }
  .tableCase {
    width: 100%;
    height: calc(100vh - 220px);
    overflow: hidden;
    .father {
      width: 100%;
      .content {
        width: 100%;
        .left {
          width: 10%;
        }
        .right {
          width: 90%;
        }
      }
    }
  }
}
.select {
  margin-bottom: 10px;
}
.border-top {
  border-top: 1px solid #000;
}
.border-left {
  border-left: 1px solid #000;
}
.border-bottom {
  border-bottom: 1px solid #000;
}
.border-right {
  border-right: 1px solid #000;
}
.title {
  z-index:-1;
  background: #00b0f0;
}
.row {
  height: 30px;
  float: left;
  display: flex;
  align-items:center;
}
.center {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  list-style-type: none;
}
.center_2 {
  align-items: center;
  justify-content: center;
  list-style-type: none;
}
.text-left {
  text-align: left;
}
.handleLine{
  border-bottom:1px dashed #000;cursor:pointer;
}
</style>
